import React from 'react';
import {
    JsonSchemaForm,
    NsJsonSchemaForm,
    XFlowNodeCommands,
} from '@antv/xflow';
import { set } from 'lodash';
import {
    RenameService,
    CanvasService,
} from './components';

import type { NsNodeCmd, NsGraph } from '@antv/xflow'

export interface JsonSchemaFormPartProps {
    [key: string]: any
}

/** ControlShape的Enum */
const { ControlShape } = NsJsonSchemaForm

const controlMapService = controlMap => {
    controlMap.set('rename-service', RenameService)
    controlMap.set('canvas-service', CanvasService)
    return controlMap
}

/** 保存form的values */
export const formValueUpdateService: NsJsonSchemaForm.IFormValueUpdateService = async args => {
    const { values, commandService, targetData } = args
    const updateNode = (node: NsGraph.INodeConfig) => {
        return commandService.executeCommand<NsNodeCmd.UpdateNode.IArgs>(
            XFlowNodeCommands.UPDATE_NODE.id,
            { nodeConfig: node },
        )
    }
    console.log('formValueUpdateService-更新更新-values:', values, args)
    const nodeConfig: NsGraph.INodeConfig = {
        ...targetData,
    }
    values.forEach(val => {
        set(nodeConfig, val.name, val.value)
    })
    updateNode(nodeConfig)
}

/** 根据选中的节点更新formSchema */
export const formSchemaService: NsJsonSchemaForm.IFormSchemaService = async args => {
    const { targetData, targetType } = args
    const isGroup = args?.targetData?.isGroup
    console.log(`formSchemaService args函数函数:`, args)

    const nodeSchema = {
        /** 配置一个Tab */
        tabs: [
            {
                /** Tab的title */
                name: '节点配置',
                groups: [
                    {
                        name: 'group1',
                        controls: [
                            {
                                name: 'label',
                                label: '节点Label',
                                shape: ControlShape.INPUT,
                                value: targetData?.label,
                            },
                            {
                                name: 'x',
                                label: 'x',
                                shape: ControlShape.FLOAT,
                                value: targetData?.x,
                            },
                            {
                                name: 'y',
                                label: 'y',
                                shape: ControlShape.FLOAT,
                                value: targetData?.y,
                            },
                        ],
                    },
                ],
            },
        ],
        // tabs: [
        //     {
        //         name: '设置',
        //         groups: [
        //             {
        //                 name: 'groupName',
        //                 controls: [
        //                     {
        //                         label: '节点名',
        //                         name: '自定义form',
        //                         shape: 'rename-service',
        //                     },
        //                 ],
        //             },
        //         ],
        //     },
        // ],
    }
    if (isGroup) {
        // TODO
    }
    if (targetType === 'edge') {
        // TODO
    }
    if (targetType === 'node') {
        return nodeSchema
    }
    return {
        tabs: [
            {
                /** Tab的title */
                name: '设置',
                groups: [
                    {
                        name: 'groupName',
                        controls: [
                            {
                                label: '',
                                name: 'canvas-service',
                                shape: 'canvas-service',
                            },
                        ],
                    },
                ],
            },
        ],
    }
}

const getCustomRenderComponent: NsJsonSchemaForm.ICustomRender = (
    targetType,
    targetData,
) => {
    console.log('打印getCustomRenderComponent： ', targetType, targetData)
    if (targetType === 'node') {
        return () => (
            <div className="custom-form-component">
                node: {targetData?.label} custom componnet
            </div>
        )
    }
    if (targetType === 'canvas') {
        return () => (
            <div className="custom-form-component">
                canvas custom componnet
            </div>
        )
    }

    return null
}

const JsonSchemaFormPart: React.FC<JsonSchemaFormPartProps> = () => {

    return (
        <JsonSchemaForm
            /** // 可以通过controlMapService更新内置的controlMap */
            controlMapService={controlMapService}
            /** 画布selection:change事件的回调 return的值是form的schema */
            formSchemaService={formSchemaService}
            /** formitem change时会调用的回调，用于保存form的值到画布/db */
            formValueUpdateService={formValueUpdateService}
            /** 
             * 画布selection:change事件的回调函数 
             * 如果函数返回结果是react.component 会代替form的渲染
             */
            // getCustomRenderComponent={getCustomRenderComponent}
            /** formValueUpdateService完成后的回调 */
            // afterUpdatingCb
            /** control shape 字段对应的render components */
            // defaultControls
            /** 默认的shape render */
            // defaultControlRender
            /** 监听的画布的选中元素 */
            // targetType
            position={{ width: 200, top: 40, bottom: 0, right: 0 }}
            // header
            // footer
            // headerText
            // footerText
            // style
            // className
        />
    )
}

export default JsonSchemaFormPart